<template>
	<view class="container">
		<view class="header">
			<view class="header-nav">
				<view class="h2 active">学院新闻</view>
				<view class="h2">党建动态</view>
				<view class="h2">通知公告</view>
				<view class="h2">分院动态</view>
			</view>
			<view class="read-more">
				阅读更多
			</view>
		</view>
		<news-list :list-data="listData"></news-list>
	</view>
</template>

<script setup lang="ts">
	import NewsList from "@/components/news/news-list.vue";
	import { reactive } from "vue";
	import {
		onPullDownRefresh,onReachBottom,onShow,onLoad
	} from "@dcloudio/uni-app";
	import ajax from "@/util/request";
	
	const listData = reactive([]);
	
	let page = 1;
	// 是否翻页完毕
	let end = false;
	let lastTime = new Date().getTime();
	
	// 下拉刷新：
	onPullDownRefresh(() => {
		page = 1;
		end = false;
		queryList();
	});
	
	// 上拉触底：翻页
	onReachBottom(() => {
		const nowTime = new Date().getTime();
		if (nowTime - lastTime <= 5000) {
			return;
		}
		lastTime = nowTime;
		page ++;
		queryList();
	});
	
	function queryList() {
		if (end) {
			return;
		}
		ajax("/content/queryList",{t_cat_plant_fk:405,rows: 30,page}).then(({data}) => {
			if (data.status > 0) {
				// 如果第一页，重置
				if (page == 1) {
					listData.length = 0;
				}
				// 如果回来的列表，行数小于请求行数，那么表示翻页完毕
				if (data.result_data.length < 30) {
					end = true;
					uni.showToast({
						title: "数据已经加载完毕"
					})
				}
				
				listData.push(...data.result_data);
				
				// 关闭下拉刷新动画
				uni.stopPullDownRefresh();
			}
		})
	}
	
	onShow(() => {
		uni.startPullDownRefresh({});
		console.log("新闻onShow");
	})
	
	onLoad(() => {
		console.log("新闻onLoad");
		uni.$on("openNews",function(data) {
			console.log("新闻onLoad.data = ",data)
		})
	})
</script>

<style scoped>
	.container {
		padding: 10rpx;
	}
	
	.h2 {
		margin-right: 5rpx;
	}
	
	.header {
		padding: 20rpx 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.header-nav {
		display: flex;
	}
	
	.read-more {
	  border: 1px dotted var(--base-color);
	  border-radius: 5px;
	  font-weight: 500;
	  font-size: 80%;
	  padding: 2px 3px;
	  background-color: #fff;
	  cursor: pointer;
	}
</style>
